<template>
  <j-modal
    title="批量导入"
    :width="600"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-upload-dragger
        :multiple="false"
        :accept="accept"
        :fileList="fileListData"
        :remove="handleRemove"
        :beforeUpload="beforeUpload"
      >
        <p class="ant-upload-drag-icon">
          <a-icon type="inbox" />
        </p>
        <p class="ant-upload-text">点击或将文件拖拽到这里上传</p>
        <p class="ant-upload-hint">支持扩展名：{{ accept }}</p>
      </a-upload-dragger>
      <div class="ant-upload-matter">
        <p>注意事项：</p>
        <p>1.请勿修改模版格式，以免导入失败；</p>
      </div>
    </a-spin>
    <template slot="footer">
      <a class="footer-model" @click="handleModal">下载数据模板</a>
      <a-button key="back" @click="handleCancel"> 取消 </a-button>
      <a-button key="submit" type="primary" @click="handleOk"> 开始导入 </a-button>
    </template>
  </j-modal>
</template>

<script>
// import { importExcel, exportWarningTemplate } from '@/api/warning/WarningData.js'
export default {
  data() {
    return {
      title: '',
      width: 800,
      visible: false,
      disableSubmit: false,
      result: {},
      downloadFileName: '预警速报-导入模板.xls',
      confirmLoading: false,
      fileListData: [],
      accept: '.xls,.xlsx' // 导入的文件格式
    }
  },
  computed: {
    isDisabled() {
      return !(this.fileListData.length > 0)
    }
  },
  methods: {
    show() {
      this.visible = true
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      const { fileListData } = this
      if (fileListData && fileListData.length === 0) {
        this.$message.error('请选择导入文件')
        return
      }
      const formData = new FormData()
      fileListData.forEach((file) => {
        formData.append('files', file)
      })
      this.confirmLoading = true
      importExcel(formData)
        .then((res) => {
          if (res.success) {
            this.confirmLoading = false
            this.showConfirm(res.result)
          } else {
            this.confirmLoading = false
            this.$message.error(res.message)
          }
        })
        .catch((e) => {
          this.confirmLoading = false
          this.$message.error('导入出错了')
        })
    },
    showConfirm(result) {
      this.$confirm({
        title: '手机号已导入完成，是否发送预警短信?',
        content: (h) => (
          <div>
            成功导入 <span style="color:#02a7f0;">100</span> 个手机号，有效 <span style="color:#02a7f0;">100</span>
            个手机号，无效 <span style="color:red;">0</span> 个手机号
          </div>
        ),
        okText: '发送',
        onOk() {
          console.log('OK')
          this.handleCancel()
        },
        onCancel() {
          console.log('Cancel')
          this.handleCancel()
        },
        class: 'test'
      })
    },
    handleCancel() {
      this.close()
    },
    handleModal() {
      exportWarningTemplate().then((res) => {
        if (res && res.size > 0) {
          const fileName = '预警速报-导入模板.xls'
          this.downLoadMix(res, fileName)
        } else {
          this.$message.warn('模板不存在！')
        }
      })
    },
    // 上传前拦截
    beforeUpload(file) {
      this.fileListData = [file] // [...this.fileListData, file];
      return false
    },
    // 移除
    handleRemove(file) {
      const index = this.fileListData.indexOf(file)
      const newFileList = this.fileListData.slice()
      newFileList.splice(index, 1)
      this.fileListData = newFileList
    },
    downLoadMix(res, fileName) {
      let blob = new Blob([res]) // res为从后台返回的数据
      if (!fileName) {
        fileName = res.headers['content-disposition'].split('filename=').pop()
      }
      if ('msSaveOrOpenBlob' in navigator) {
        window.navigator.msSaveOrOpenBlob(blob, fileName)
      } else {
        const elink = document.createElement('a')
        elink.download = fileName
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        URL.revokeObjectURL(elink.href)
        document.body.removeChild(elink)
      }
    }
  }
}
</script>

<style scoped lang="less">
/deep/.ant-upload-matter {
  padding: 30px 0 0;
  p {
    margin-bottom: 0;
  }
}
/deep/.ant-modal-footer {
  position: relative;
  .footer-model {
    position: absolute;
    left: 20px;
    &::before {
      content: '*';
      color: #f5222d;
      margin-right: 5px;
    }
  }
}
</style>
